<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel Question Import Tool</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            padding: 30px;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
            color: #2c5aa0;
        }
        .upload-area {
            border: 2px dashed #2c5aa0;
            border-radius: 8px;
            padding: 40px;
            text-align: center;
            margin-bottom: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .upload-area:hover {
            background-color: #f0f4f8;
        }
        .file-input {
            display: none;
        }
        .btn {
            background: linear-gradient(135deg, #2c5aa0 0%, #1e3a8a 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px;
        }
        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        .format-guide {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 20px;
        }
        .manual-input {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 15px;
            margin-top: 20px;
        }
        .input-row {
            display: grid;
            grid-template-columns: 1fr 1fr 3fr 1fr 1fr 1fr 1fr 1fr 2fr;
            gap: 10px;
            margin-bottom: 10px;
            align-items: center;
        }
        .input-row input, .input-row select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        .input-row label {
            font-weight: bold;
            font-size: 12px;
            text-align: center;
        }
        .output-area {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 15px;
            margin-top: 20px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            max-height: 300px;
            overflow-y: auto;
        }
        .question-list {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 10px;
            margin: 10px 0;
        }
        .question-item {
            background: white;
            border: 1px solid #eee;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 10px;
        }
        .remove-btn {
            background: #dc3545;
            color: white;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Question Import Tool</h1>
            <p>Manual input tool for creating question database</p>
        </div>

        <div class="format-guide">
            <h3>How to use:</h3>
            <p>1. Fill in the form below to add questions</p>
            <p>2. Click "Add Question" to add each question</p>
            <p>3. Review your questions in the list</p>
            <p>4. Click "Generate Code" to create the data.js content</p>
            <p>5. Copy the generated code to your data.js file</p>
        </div>

        <div class="manual-input">
            <h3>Add New Question:</h3>
            <div class="input-row">
                <label>Type</label>
                <label>Subject</label>
                <label>Question</label>
                <label>Option A</label>
                <label>Option B</label>
                <label>Option C</label>
                <label>Option D</label>
                <label>Answer</label>
                <label>Explanation</label>
            </div>
            <div class="input-row">
                <select id="questionType">
                    <option value="single">Single</option>
                    <option value="multiple">Multiple</option>
                    <option value="judge">Judge</option>
                </select>
                <select id="questionSubject">
                    <option value="math">Math</option>
                    <option value="chinese">Chinese</option>
                    <option value="english">English</option>
                    <option value="science">Science</option>
                </select>
                <input type="text" id="questionText" placeholder="Enter question text">
                <input type="text" id="optionA" placeholder="Option A">
                <input type="text" id="optionB" placeholder="Option B">
                <input type="text" id="optionC" placeholder="Option C">
                <input type="text" id="optionD" placeholder="Option D">
                <input type="text" id="correctAnswer" placeholder="A or A,C">
                <input type="text" id="explanation" placeholder="Explanation">
            </div>
            <div style="text-align: center; margin-top: 15px;">
                <button class="btn" onclick="addQuestion()">Add Question</button>
                <button class="btn" onclick="clearForm()">Clear Form</button>
            </div>
        </div>

        <div class="question-list" id="questionList" style="display: none;">
            <h3>Added Questions:</h3>
            <div id="questionItems"></div>
        </div>

        <div style="text-align: center; margin-top: 20px;">
            <button class="btn" onclick="generateCode()" id="generateBtn" style="display: none;">Generate Code</button>
            <button class="btn" onclick="copyToClipboard()" id="copyBtn" style="display: none;">Copy to Clipboard</button>
            <button class="btn" onclick="clearAllQuestions()" id="clearBtn" style="display: none;">Clear All</button>
        </div>

        <div id="outputArea" class="output-area" style="display: none;">
            <h3>Generated Code:</h3>
            <pre id="generatedCode"></pre>
        </div>
    </div>

    <script>
        let questions = [];
        let nextId = 16;

        function addQuestion() {
            const type = document.getElementById('questionType').value;
            const subject = document.getElementById('questionSubject').value;
            const questionText = document.getElementById('questionText').value.trim();
            const optionA = document.getElementById('optionA').value.trim();
            const optionB = document.getElementById('optionB').value.trim();
            const optionC = document.getElementById('optionC').value.trim();
            const optionD = document.getElementById('optionD').value.trim();
            const answerText = document.getElementById('correctAnswer').value.trim().toUpperCase();
            const explanation = document.getElementById('explanation').value.trim();

            // Validation
            if (!questionText) {
                alert('Please enter question text');
                return;
            }

            // Prepare options based on question type
            let options = [];
            if (type === 'judge') {
                options = ['True', 'False'];
            } else {
                if (optionA) options.push(optionA);
                if (optionB) options.push(optionB);
                if (optionC) options.push(optionC);
                if (optionD) options.push(optionD);
                
                if (options.length < 2) {
                    alert('Please provide at least 2 options');
                    return;
                }
            }

            // Parse correct answer
            let correctAnswer;
            if (type === 'multiple') {
                correctAnswer = [];
                if (answerText.includes(',')) {
                    answerText.split(',').forEach(a => {
                        const index = a.trim().charCodeAt(0) - 65;
                        if (index >= 0 && index < options.length) {
                            correctAnswer.push(index);
                        }
                    });
                } else {
                    for (let char of answerText) {
                        const index = char.charCodeAt(0) - 65;
                        if (index >= 0 && index < options.length) {
                            correctAnswer.push(index);
                        }
                    }
                }
                if (correctAnswer.length === 0) correctAnswer = [0];
            } else {
                const index = answerText.charCodeAt(0) - 65;
                correctAnswer = (index >= 0 && index < options.length) ? index : 0;
            }

            // Create question object
            const question = {
                id: nextId++,
                type: type,
                subject: subject,
                question: questionText,
                options: options,
                correctAnswer: correctAnswer,
                explanation: explanation || 'No explanation provided'
            };

            questions.push(question);
            updateQuestionList();
            clearForm();
        }

        function updateQuestionList() {
            const listContainer = document.getElementById('questionList');
            const itemsContainer = document.getElementById('questionItems');
            
            if (questions.length === 0) {
                listContainer.style.display = 'none';
                document.getElementById('generateBtn').style.display = 'none';
                document.getElementById('clearBtn').style.display = 'none';
                return;
            }

            listContainer.style.display = 'block';
            document.getElementById('generateBtn').style.display = 'inline-block';
            document.getElementById('clearBtn').style.display = 'inline-block';

            itemsContainer.innerHTML = '';
            questions.forEach((q, index) => {
                const div = document.createElement('div');
                div.className = 'question-item';
                div.innerHTML = `
                    <strong>Q${q.id}:</strong> ${q.question}<br>
                    <strong>Type:</strong> ${q.type} | <strong>Subject:</strong> ${q.subject}<br>
                    <strong>Options:</strong> ${q.options.join(', ')}<br>
                    <strong>Answer:</strong> ${Array.isArray(q.correctAnswer) ? 
                        q.correctAnswer.map(i => String.fromCharCode(65 + i)).join(',') : 
                        String.fromCharCode(65 + q.correctAnswer)}<br>
                    <button class="remove-btn" onclick="removeQuestion(${index})">Remove</button>
                `;
                itemsContainer.appendChild(div);
            });
        }

        function removeQuestion(index) {
            questions.splice(index, 1);
            updateQuestionList();
        }

        function clearForm() {
            document.getElementById('questionText').value = '';
            document.getElementById('optionA').value = '';
            document.getElementById('optionB').value = '';
            document.getElementById('optionC').value = '';
            document.getElementById('optionD').value = '';
            document.getElementById('correctAnswer').value = '';
            document.getElementById('explanation').value = '';
        }

        function clearAllQuestions() {
            if (confirm('Are you sure you want to clear all questions?')) {
                questions = [];
                nextId = 16;
                updateQuestionList();
                document.getElementById('outputArea').style.display = 'none';
                document.getElementById('copyBtn').style.display = 'none';
            }
        }

        function generateCode() {
            if (questions.length === 0) {
                alert('Please add some questions first');
                return;
            }

            let code = `// Question database\nconst questionDatabase = [\n`;
            
            // Add comment for existing questions
            code += `    // Add your existing questions here (id 1-15)\n\n`;
            
            // Add new questions
            questions.forEach((q, index) => {
                code += `    {\n`;
                code += `        id: ${q.id},\n`;
                code += `        type: '${q.type}',\n`;
                code += `        subject: '${q.subject}',\n`;
                code += `        question: '${q.question.replace(/'/g, "\\'")}',\n`;
                code += `        options: [${q.options.map(opt => `'${opt.replace(/'/g, "\\'")}'`).join(', ')}],\n`;
                code += `        correctAnswer: ${Array.isArray(q.correctAnswer) ? `[${q.correctAnswer.join(', ')}]` : q.correctAnswer},\n`;
                code += `        explanation: '${q.explanation.replace(/'/g, "\\'")}'`;
                code += `\n    }`;
                if (index < questions.length - 1) code += ',';
                code += `\n\n`;
            });
            
            code += `];\n\n`;
            code += `// Export for use in other files\n`;
            code += `if (typeof module !== 'undefined' && module.exports) {\n`;
            code += `    module.exports = questionDatabase;\n`;
            code += `}`;

            document.getElementById('generatedCode').textContent = code;
            document.getElementById('outputArea').style.display = 'block';
            document.getElementById('copyBtn').style.display = 'inline-block';
        }

        function copyToClipboard() {
            const code = document.getElementById('generatedCode').textContent;
            navigator.clipboard.writeText(code).then(() => {
                alert('Code copied to clipboard! You can now paste it into your data.js file.');
            }).catch(err => {
                // Fallback for older browsers
                const textArea = document.createElement('textarea');
                textArea.value = code;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                alert('Code copied to clipboard!');
            });
        }

        // Initialize
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Question Import Tool loaded successfully');
        });
    </script>
</body>
</html>